<template>
  <view>
    <view class="header">
      <view class="">注：该数据仅供演示使用</view>
      <uni-icons size="24" @click="handleChange" type="calendar" v-if="useGlobalStore.isTimetableListView"></uni-icons>
      <uni-icons size="24" @click="handleChange" type="list" v-else></uni-icons>
    </view>
    <ListView v-if="useGlobalStore.isTimetableListView" />
    <TableView v-else />
  </view>
</template>

<script setup>
  import ListView from '@/components/timetable/listView.vue'
  import TableView from '@/components/timetable/tableView.vue'
  import { globalStore } from '@/store/global'

  const useGlobalStore = globalStore()

  function handleChange() {
    useGlobalStore.setIsTimetableListView(!useGlobalStore.isTimetableListView)
  }
</script>

<style scoped lang="scss">
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 10px;
    view {
      font-size: 12rpx;
      color: darkgray;
    }
  }
</style>
